<template>
  <!-- 排查专题专栏 -->
  <div class="troubleBox">
    <vxe-modal
      :mask="false"
      :marginSize="-500"
      :lock-view="false"
      :width="changeWidth"
      height="635"
      :position="{ top: 49, left: 7 }"
      :model-value="dialogVisible"
      @close="handleClose"
    >
      <template #title>
        <span style="color: white">排查专题</span>
        <img
          @click="switchWidth"
          :class="switchWidthX"
          src="@/assets/images/fold_up.png"
          alt=""
        />
      </template>
      <template #default>
        <el-tabs type="border-card">
          <!-- 排查区域 -->
          <el-tab-pane label="排查区域">
            <!-- 提交查询 -->
            <div class="area_inline">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="关键字:">
                  <el-input
                    v-model="formInline.search"
                    placeholder="请输入区域名称"
                    size="small"
                  />
                </el-form-item>
                <el-form-item label="查询进度:">
                  <el-checkbox-group v-model="formInline.status">
                    <el-checkbox label="未开始" name="status" size="small" />
                    <el-checkbox label="已完成" name="status" size="small" />
                    <el-checkbox label="进行中" name="status" size="small" />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="排查单位:">
                  <el-checkbox-group v-model="formInline.companyName">
                    <el-checkbox
                      label="中建七局"
                      name="companyName"
                      size="small"
                    />
                    <el-checkbox
                      label="水务集团"
                      name="companyName"
                      size="small"
                    />
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" size="small">
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 表单展示 -->
            <el-table
              stripe
              :data="gridData"
              max-height="352"
              :header-cell-style="{
                background: '#f1eeff',
                'text-align': 'left',
              }"
              :cell-style="{ 'text-align': 'left' }"
              :row-style="{ height: 35 + 'px' }"
              @row-click="rowarea"
            >
              <el-table-column property="id" label="编码" width="140" />
              <el-table-column
                property="name"
                label="区域名称"
                width="110"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                property="regionType"
                label="区域类型"
                width="60"
              />
              <el-table-column
                property="areaName"
                label="所属片区"
                width="140"
              />

              <el-table-column
                property="companyName"
                label="排查单位"
                width="80"
              />
              <el-table-column property="status" label="进度" width="80" />
              <el-table-column
                property="description"
                label="排查描述"
                width="80"
              />
              <el-table-column property="remark" label="备注" width="80" />
            </el-table>
            <!-- 编辑表单 -->
            <div class="editForm">
              <div class="editTitle">编辑信息</div>
              <div class="totalArea">
                总数:{{ totalArea }}
                <span style="color: #4c4c5e">
                  显示:
                  <el-switch
                    size="small"
                    v-model="value3"
                    @change="showTroubleArea"
                  />
                </span>
              </div>
            </div>
            <div class="submitEdit">
              <el-form
                ref="loginFormRef"
                :rules="rulesPC"
                :inline="true"
                :model="formInline2"
                class="demo-form-inline"
              >
                <el-form-item label="泵站片区:" prop="areaName">
                  <el-select
                    v-model="formInline2.areaName"
                    placeholder="选择片区"
                    size="small"
                  >
                    <el-option
                      v-for="item in optionsPump"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                    >
                  </el-select>
                </el-form-item>
                <el-form-item label="区域名称:" prop="name">
                  <el-input
                    v-model="formInline2.name"
                    placeholder="请输入区域名称"
                    size="small"
                  />
                </el-form-item>
                <el-form-item label="区域类型:" prop="regionType">
                  <el-select
                    size="small"
                    v-model="formInline2.regionType"
                    placeholder="选择区域"
                  >
                    <el-option label="小区" value="小区"></el-option>
                    <el-option label="市政" value="市政"></el-option>
                    <el-option label="地块" value="地块"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="区域编码:" prop="id">
                  <el-input
                    v-model="formInline2.id"
                    placeholder="小区或道路大写首字母"
                    size="small"
                  />
                </el-form-item>
                <el-form-item label="排查单位:" prop="companyName">
                  <el-select
                    size="small"
                    v-model="formInline2.companyName"
                    placeholder="选择单位"
                  >
                    <el-option label="中建七局" value="中建七局"></el-option>
                    <el-option label="水务集团" value="水务集团"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排查进度:" prop="status">
                  <el-select
                    size="small"
                    v-model="formInline2.status"
                    placeholder="选择进度"
                  >
                    <el-option label="未开始" value="未开始"></el-option>
                    <el-option label="已完成" value="已完成"></el-option>
                    <el-option label="进行中" value="进行中"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排查描述:" prop="description">
                  <el-input v-model="formInline2.description" size="small" />
                </el-form-item>
                <el-form-item label="排查备注:" prop="remark">
                  <el-input v-model="formInline2.remark" size="small" />
                </el-form-item>
                <el-form-item label="绘制区域:">
                  <el-select
                    v-model="value"
                    class="m-2"
                    placeholder="拉框选择"
                    size="small"
                    @change="drawChange"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <div class="editBtn">
                  <!-- <el-form-item style="margin-left: 652px"> -->
                  <el-button type="primary" @click="onSubmit2" size="small">
                    新增
                  </el-button>
                  <el-button type="primary" @click="onSubmit3" size="small">
                    修改
                  </el-button>
                  <!-- </el-form-item> -->
                </div>
              </el-form>
            </div>
          </el-tab-pane>

          <!-- 排查问题点 -->
          <el-tab-pane label="排查问题点">
            <div class="waterSearch">
              <label class="keyword_firstline">关键字:</label>
              <div>
                <vxe-input
                  clearable
                  v-model="pointSearchValue"
                  placeholder="小区/道路名查询"
                  type="search"
                  @search-click="findSearchPoint"
                ></vxe-input>
              </div>
              <div class="keyword_firstline_b">显示:</div>
              <el-switch
                size="small"
                v-model="value1"
                @change="showPointSwitch"
              />
            </div>
            <div>
              <el-table
                :data="troublePoint"
                max-height="530"
                :header-cell-style="{
                  background: '#f1eeff',
                  'text-align': 'left',
                }"
                :cell-style="{ 'text-align': 'left' }"
                :row-style="{ height: 35 + 'px' }"
                @row-click="rowPoint"
              >
                <el-table-column
                  property="pointId"
                  label="点位编码"
                  width="200"
                ></el-table-column>
                <el-table-column
                  property="areaName"
                  label="片区名称"
                  width="140"
                ></el-table-column>
                <!--  -->
                <el-table-column
                  property="roadName"
                  label="小区/道路名称"
                  width="100"
                  :show-overflow-tooltip="true"
                ></el-table-column>

                <el-table-column
                  property="checkWellId"
                  label="检查井/管段编号"
                  width="130"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  property="troubleType"
                  label="问题类型"
                  :show-overflow-tooltip="true"
                  width="90"
                ></el-table-column>
                <el-table-column
                  property="troubleShootingDate"
                  label="排查日期"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="repairDescription"
                  label="问题描述"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="x"
                  label="X坐标"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="y"
                  label="Y坐标"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="remark"
                  label="备注"
                  width="100"
                ></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!-- 水质检测点 -->
          <el-tab-pane label="水质检测点">
            <div class="demo">
              <div class="waterSearch">
                <label class="keyword_firstline">关键字:</label>
                <div>
                  <vxe-input
                    clearable
                    v-model="waterSearchValue"
                    placeholder="小区/道路名查询"
                    type="search"
                    @search-click="findSearchWater"
                  ></vxe-input>
                </div>

                <div class="COD_box">
                  <div class="COD_box_title">COD浓度选择:</div>
                  <el-checkbox
                    @change="handle180"
                    size="small"
                    v-model="checked1"
                    label="小于180"
                  />
                  <el-checkbox
                    @change="handle260"
                    size="small"
                    v-model="checked2"
                    label="180到260"
                  />
                  <el-checkbox
                    @change="handle260Plus"
                    size="small"
                    v-model="checked3"
                    label="大于260"
                  />
                  <div class="keyword_firstline_b">显示:</div>
                  <el-switch
                    size="small"
                    v-model="value2"
                    @change="showWaterPointSwitch"
                  />
                </div>
              </div>
              <el-table
                :data="troubleWaterPoint"
                max-height="525"
                :header-cell-style="{
                  background: '#f1eeff',
                  'text-align': 'left',
                }"
                :cell-style="{ 'text-align': 'left' }"
                :row-style="{ height: 35 + 'px' }"
                @row-click="rowWater"
              >
                <el-table-column
                  property="areaName"
                  label="片区名称"
                  width="110"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  property="roadName"
                  label="小区/道路名称"
                  width="130"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  property="samplingLocation"
                  label="采样点位置"
                  width="110"
                  :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                  property="checkWellId"
                  label="检查井编号"
                  width="160"
                ></el-table-column>
                <el-table-column
                  property="cod"
                  label="COD(mg/L)"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="nh3"
                  label="氨氮(mg/L)"
                  width="60"
                ></el-table-column>
                <el-table-column
                  property="samplingDate"
                  label="采样日期"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="x"
                  label="X坐标"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="y"
                  label="Y坐标"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="samplingWay"
                  label="采样方式"
                  width="100"
                ></el-table-column>
                <el-table-column
                  property="remark"
                  label="备注"
                  width="100"
                ></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </vxe-modal>
  </div>
  <!-- 排查区域弹窗 -->
  <div ref="popArea">
    <div class="bufferPoint PCarea">
      <div class="contentPanePoint">
        <div>
          <table>
            <tbody>
              <!-- 表头 -->
              <div>
                <div class="first_line">
                  <div>详细信息</div>
                  <div class="close titleButton" @click="closePopupArea">×</div>
                </div>
              </div>
              <!-- 表单信息 -->
              <div>
                <tr>
                  <td class="td"><b>名称:</b></td>
                  <td>
                    <input
                      type="text"
                      class="text_input"
                      v-model="Iarea.name"
                    />
                  </td>
                </tr>
                <tr>
                  <td class="td"><b>类型:</b></td>
                  <td>
                    <input
                      type="text"
                      class="text_input"
                      v-model="Iarea.regionType"
                    />
                  </td>
                </tr>
                <tr>
                  <td class="td"><b>编码:</b></td>
                  <td>
                    <input type="text" class="text_input" v-model="Iarea.id" />
                  </td>
                </tr>
                <tr>
                  <td class="td"><b>片区:</b></td>
                  <td>
                    <input
                      type="text"
                      class="text_input"
                      v-model="Iarea.areaName"
                    />
                  </td>
                </tr>
                <tr>
                  <td class="td"><b>单位:</b></td>
                  <td>
                    <input
                      type="text"
                      class="text_input"
                      v-model="Iarea.companyName"
                    />
                  </td>
                </tr>
                <tr>
                  <td class="td"><b>进度:</b></td>
                  <td>
                    <input
                      type="text"
                      class="text_input"
                      v-model="Iarea.status"
                    />
                  </td>
                </tr>
                <tr>
                  <td class="td"><b>备注:</b></td>
                  <td>
                    <input
                      type="text"
                      class="text_input"
                      v-model="Iarea.remark"
                    />
                  </td>
                </tr>
                <input
                  class="input_btn"
                  @click="onSubmit4"
                  type="button"
                  value="编辑"
                />
              </div>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <!-- 排查问题点弹窗 -->
  <div ref="popPoint">
    <div class="bufferPoint PCpoint">
      <div class="contentPanePoint">
        <div>
          <table>
            <tbody>
              <!-- 表头 -->
              <div>
                <div class="first_line">
                  <div>详细信息</div>
                  <div class="close titleButton" @click="closePopupPoint">
                    ×
                  </div>
                </div>
                <div class="dotted_line">
                  <div class="second_line">
                    <div :class="reportColor" @click="openVideo">问题视频</div>
                    <div :class="picColor" @click="openPic">问题照片</div>
                  </div>
                </div>
              </div>
              <!-- 表单信息 -->
              <div>
                <tr>
                  <td class="td"><b>点位编码:</b></td>
                  <td>{{ Ipoint.pointId }}</td>
                </tr>
                <tr>
                  <td class="td"><b>点位名称:</b></td>
                  <td>{{ Ipoint.roadName }}</td>
                </tr>
                <tr>
                  <td class="td"><b>区域编码:</b></td>
                  <td>{{ Ipoint.regionId }}</td>
                </tr>
                <tr>
                  <td class="td"><b>片区名称:</b></td>
                  <td>{{ Ipoint.areaName }}</td>
                </tr>
                <tr>
                  <td class="td"><b>井室编码:</b></td>
                  <td>{{ Ipoint.checkWellId }}</td>
                </tr>
                <tr>
                  <td class="td"><b>问题类型:</b></td>
                  <td>{{ Ipoint.troubleType }}</td>
                </tr>
                <tr>
                  <td class="td"><b>问题描述:</b></td>
                  <td>{{ Ipoint.description }}</td>
                </tr>
                <tr>
                  <td class="td"><b>排查日期:</b></td>
                  <td>{{ Ipoint.troubleShootingDate }}</td>
                </tr>
                <tr>
                  <td class="td"><b>点位备注:</b></td>
                  <td>{{ Ipoint.remark }}</td>
                </tr>
              </div>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <!-- 水质点弹窗 -->
  <div ref="popWater">
    <div class="bufferPoint PCwater">
      <div class="contentPanePoint">
        <div>
          <table>
            <tbody>
              <!-- 表头 -->
              <div>
                <div class="first_line">
                  <div>详细信息</div>
                  <div class="close titleButton" @click="closePopupWater">
                    ×
                  </div>
                </div>
              </div>
              <!-- 表单信息 -->
              <div>
                <tr>
                  <td class="td"><b>点位编码:</b></td>
                  <td>{{ Iwater.pointId }}</td>
                </tr>
                <tr>
                  <td class="td"><b>点位名称:</b></td>
                  <td>{{ Iwater.roadName }}</td>
                </tr>
                <tr>
                  <td class="td"><b>区域编码:</b></td>
                  <td>{{ Iwater.regionId }}</td>
                </tr>
                <tr>
                  <td class="td"><b>片区名称:</b></td>
                  <td>{{ Iwater.areaName }}</td>
                </tr>
                <tr>
                  <td class="td"><b>井室编码:</b></td>
                  <td>{{ Iwater.checkWellId }}</td>
                </tr>
                <tr>
                  <td class="td"><b>采样位置:</b></td>
                  <td>{{ Iwater.samplingLocation }}</td>
                </tr>
                <tr>
                  <td class="td"><b>COD数:</b></td>
                  <td>{{ Iwater.cod }}</td>
                </tr>
                <tr>
                  <td class="td"><b>采样日期:</b></td>
                  <td>{{ Iwater.samplingDate }}</td>
                </tr>
                <tr>
                  <td class="td"><b>采样方式:</b></td>
                  <td>{{ Iwater.samplingWay }}</td>
                </tr>
                <tr>
                  <td class="td"><b>点位备注:</b></td>
                  <td>{{ Iwater.remark }}</td>
                </tr>
              </div>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <!-- 排查问题点的图片与视频弹窗 -->
  <div class="picPop">
    <!-- 排查问题点图片弹窗 -->
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value6"
      width="650"
      height="500"
    >
      <template #title>
        <div style="font-size: 22px">图片</div>
      </template>
      <template #default>
        <div class="guild_img_box">
          <div v-show="single">
            <img v-viewer :src="testPhotoUrl" alt="" style="width: 100%" />
          </div>
          <div v-show="poly" class="poly">
            <el-carousel>
              <el-carousel-item v-for="item in images" :key="item.id">
                <img
                  :src="item.originalUrl + item.pic"
                  class="bannerimg"
                  style="width: 100%"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </template>
    </vxe-modal>
    <!-- 排查问题点视频弹窗 -->
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value8"
      width="800"
      height="520"
      @close="handleVideoX"
    >
      <template #title>
        <div>
          <span style="margin-right: 25px; margin-left: 15px">视频</span>
          <!-- 下拉菜单 -->
          <el-select
            v-model="movieValue"
            class="m-2"
            placeholder="下拉视频"
            @change="movieChange"
          >
            <el-option
              v-for="item in movieOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>
      <template #default>
        <!-- <div style="width: 100%; height: 100%"> -->
        <video
          autoplay
          controls
          style="width: 770px; height: 424px"
          :src="testVideoUrl"
          id="video1"
        ></video>
        <!-- </div> -->
      </template>
    </vxe-modal>
  </div>
  <!-- 手写进度条 -->
  <div>
    <div :class="classObject">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
      <div class="rect6"></div>
      <div class="rect7"></div>
      <div class="rect8"></div>
      <div class="rect9"></div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  ref,
  toRefs,
  toRaw,
  defineComponent,
  reactive,
  watch,
  nextTick,
} from "vue";
import {
  searchTroubleArea,
  getTroubleArea,
  submitTroubleArea,
  editTroubleArea,
  getTroublePoint,
  getCOD,
  searchCOD,
  searchTroublePoint,
} from "@/api/index";
import {
  userMap,
  switchList5,
  switchList6,
  switchList7,
  switchList8,
  switchList9,
} from "@/store/index";
import { Map } from "ol";
import View from "ol/View.js";
import "ol/ol.css";
import VectorLayer from "ol/layer/Vector.js";
import VectorSource from "ol/source/Vector.js";
import { Stroke, Style, Circle, Fill } from "ol/style";
import Text from "ol/style/Text.js";
import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import LineString from "ol/geom/LineString.js";
import Polygon from "ol/geom/Polygon.js";
import Draw, { createBox, createRegularPolygon } from "ol/interaction/Draw.js";
import RegularShape from "ol/style/RegularShape.js";
import * as turf from "@turf/turf"; //引入turf做buffer缓冲区分析
import { composeCssTransform } from "ol/transform";
import { transform } from "ol/proj";
// 引入饿了么UI
import "element-plus/es/components/message/style/css";
import Overlay from "ol/Overlay"; // 引入覆盖物模块
import Select from "ol/interaction/Select.js";
import { ElEmpty, ElMessage } from "element-plus";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import XEUtils from "xe-utils";
import { switchList11 } from "@/store/index";
let map = userMap(); //接收
let list;
//使用父组件传递过来的值
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
});
const emits = defineEmits(["close"]);
const handleClose = () => {
  emits("close");
};
// 关联其他的工程图层
let storeKJCX = switchList5();
let storeRepair = switchList6();
let storeDetect = switchList7();
let storeCube = switchList8();
let storeDia = switchList9();
let storePC = switchList11();
let changePC;
let storeTrouble;
let changeTrouble;
watch(storePC, () => {
  changePC = toRaw(storePC.queryBtn);
  if (changePC == false) {
    handleClose();
    storePC.queryBtn = true;
  }
});
// 打开其他关闭排查
watch(storeRepair, () => {
  if (toRaw(storeRepair.queryBtn) == true) {
    handleClose();
  }
});
watch(storeDetect, () => {
  if (toRaw(storeDetect.queryBtn) == true) {
    handleClose();
  }
});
watch(storeCube, () => {
  if (toRaw(storeCube.queryBtn) == true) {
    handleClose();
  }
});
watch(storeKJCX, () => {
  if (toRaw(storeKJCX.queryBtn) == true) {
    handleClose();
  }
});
watch(storeDia, () => {
  if (toRaw(storeDia.queryBtn) == true) {
    handleClose();
  }
});
// 查询排查区域图层
let areaLayer;
let areaSource;
let areaFeature;
// 查询问题点图层
let TroublePointLayer;
let TroublePointSource;
let TroublePointFeature;
// 查询水质点图层
let WaterPointLayer;
let WaterPointSource;
let WaterPointFeature;
// 编辑排查图层--绘制
let areaLayerSearch;
let areaSourceSearch;
let areaFeatureSearch;
let areaSearch;
// 区域/问题点/水质点弹窗
let overlayArea;
let overlayTPoint;
let overlayWater;
//注册点击
let troubleClick;
onMounted(() => {
  list = toRaw(map.map);
  // 查询排查区域图层
  areaSource = new VectorSource({
    wrapX: false,
  });
  areaLayer = new VectorLayer({
    source: areaSource,
    title: "areaLayer",
    className: "areaLayer",
    style: {
      "fill-color": "#bfbfff80",
      "stroke-color": "#ff000099",
      "stroke-width": 2,
      "circle-radius": 7,
      "circle-fill-color": "#ff000099",
    },
    zIndex: 9999,
  });
  list.addLayer(areaLayer);
  // 排查区域弹窗图层
  overlayArea = new Overlay({
    element: popArea.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    positioning: "center-center",
    autoPanAnimation: {
      // 底图移动动画
      duration: 250,
    },
  });
  list.addOverlay(overlayArea);
  // 查询问题点图层
  TroublePointSource = new VectorSource({
    wrapX: false,
  });
  TroublePointLayer = new VectorLayer({
    title: "TroublePointLayer",
    className: "TroublePointLayer",
    source: TroublePointSource,
    zIndex: 9999,
  });
  list.addLayer(TroublePointLayer);
  // 排查问题点弹窗图层
  overlayTPoint = new Overlay({
    element: popPoint.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    positioning: "center-center",
    autoPanAnimation: {
      // 底图移动动画
      duration: 250,
    },
  });
  list.addOverlay(overlayTPoint);
  // 查询水质点图层
  WaterPointSource = new VectorSource({
    wrapX: false,
  });
  WaterPointLayer = new VectorLayer({
    title: "WaterPointLayer",
    className: "WaterPointLayer",
    source: WaterPointSource,
    zIndex: 9999,
  });
  list.addLayer(WaterPointLayer);
  // 水质点弹窗图层
  overlayWater = new Overlay({
    element: popWater.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    positioning: "center-center",
    autoPanAnimation: {
      // 底图移动动画
      duration: 250,
    },
  });
  list.addOverlay(overlayWater);
  // 编辑排查图层--绘制
  areaSourceSearch = new VectorSource({
    wrapX: false,
  });
  areaLayerSearch = new VectorLayer({
    source: areaSourceSearch,
    style: {
      "fill-color": "#365d8d80",
      "stroke-color": "#365d8d",
      "stroke-width": 2,
      "circle-radius": 7,
      "circle-fill-color": "#365d8d",
    },
    zIndex: 9999,
  });
  list.addLayer(areaLayerSearch);
  //传递接口
  getTroubleArea().then(async (res) => {
    // console.log(res.data)
    const arr = res.data;
    gridData.value = arr;
    if (res.data != undefined) {
      // 排查区域数组
      totalArea.value = arr.length;
    } else {
      totalArea.value = [];
    }

    const arrPoint = [];
    const obj = XEUtils.groupBy(arr, "areaName");
    const arrList = Object.keys(obj);
    // console.log(arrList)
    // 编辑泵站区域数组
    const arrPump = [];
    for (let i = 0; i < arrList.length; i++) {
      const obj2 = {
        value: arrList[i],
        label: arrList[i],
      };
      arrPump.push(obj2);
    }
    optionsPump.value = arrPump;
    console.log("选项", optionsPump.value);
  });
  getTroublePoint().then((res) => {
    console.log("问题点进入", res);
    if (res.data != undefined) {
      troublePoint.value = res.data;
    } else {
      troublePoint.value = "";
      console.log("暂无问题点");
    }
  });
  getCOD().then((res) => {
    console.log("水质点进入", res);
    if (res.data != undefined) {
      troubleWaterPoint.value = res.data;
    } else {
      troubleWaterPoint.value = "";
      console.log("暂无水质点");
    }
  });
});
const classObject = ref({
  spinner2: false,
  spinner2_change: true,
});
watch(props, () => {
  console.log("排查传参", props.dialogVisible);
  // 加入滚动条
  classObject.value = {
    spinner2: true,
    spinner2_change: false,
  };
  if (props.dialogVisible == true) {
    if (toRaw(storeDia.queryBtn) == true) {
      storeDia.queryBtn = false;
      showArea(); //展开排查区域
      showPoint(); //展开问题点
      showWaterPoint(); //展开水质点
      // 注册点击
      troubleClick = new Select();
      list.addInteraction(troubleClick);
      TroubleClick(); //注册点击
      // 展开排查关闭其他:空间查询探测检测修复
      storeRepair.queryBtn = false;
      storeKJCX.queryBtn = false;
      storeDetect.queryBtn = false;
      storeCube.queryBtn = false;
    } else {
      showArea(); //展开排查区域
      showPoint(); //展开问题点
      showWaterPoint(); //展开水质点
      // 注册点击
      troubleClick = new Select();
      list.addInteraction(troubleClick);
      TroubleClick(); //注册点击
      // 展开排查关闭其他:空间查询探测检测修复
      storeRepair.queryBtn = false;
      storeKJCX.queryBtn = false;
      storeDetect.queryBtn = false;
      storeCube.queryBtn = false;
    }
    showArea(); //展开排查区域
    showPoint(); //展开问题点
    showWaterPoint(); //展开水质点
    // 注册点击
    troubleClick = new Select();
    list.addInteraction(troubleClick);
    TroubleClick(); //注册点击
    // 展开排查关闭其他:空间查询探测检测修复
    storeRepair.queryBtn = false;
    storeKJCX.queryBtn = false;
    storeDetect.queryBtn = false;
    storeCube.queryBtn = false;
  } else {
    handleClose();
    areaSource.clear();
    TroublePointSource.clear();
    WaterPointSource.clear();
    areaSourceSearch.clear();
    list.removeInteraction(troubleClick);
    classObject.value = {
      spinner2: false,
      spinner2_change: true,
    };
  }
});
// 排查专题三个--注册点击
const TroubleClick = () => {
  troubleClick.on("select", async function (e) {
    const JudgeFeature = e.target
      .getFeatures()
      .getArray()[0]
      .getGeometry()
      .getType();
    // console.log('判断选择要素类型', JudgeFeature)
    const Judgelayer = e.selected[0].get("layerName");
    const JudgeValue = e.selected[0].get("attr");
    const selectCo = e.mapBrowserEvent.coordinate;
    console.log(selectCo);
    if (JudgeFeature == "Polygon" && Judgelayer == "areaLayer") {
      console.log("areaLayer", JudgeValue);
      Iarea.name = JudgeValue.name;
      Iarea.areaName = JudgeValue.areaName;
      Iarea.regionType = JudgeValue.regionType;
      Iarea.companyName = JudgeValue.companyName;
      Iarea.status = JudgeValue.status;
      Iarea.remark = JudgeValue.remark;
      Iarea.id = JudgeValue.id;
      Iarea.description = JudgeValue.description;
      overlayArea.setPosition(selectCo);
      overlayWater.setPosition(undefined);
      overlayTPoint.setPosition(undefined);
    } else if (JudgeFeature == "Point") {
      if (Judgelayer == "TroublePointLayer") {
        /* 区域弹窗 */
        Ipoint.pointId = JudgeValue.pointId;
        Ipoint.roadName = JudgeValue.roadName;
        Ipoint.regionId = JudgeValue.regionId;
        Ipoint.areaName = JudgeValue.areaName;
        Ipoint.checkWellId = JudgeValue.checkWellId;
        Ipoint.troubleType = JudgeValue.troubleType;
        Ipoint.description = JudgeValue.description;
        Ipoint.troubleShootingDate = JudgeValue.troubleShootingDate;
        Ipoint.remark = JudgeValue.remark;
        /* 判断是否有视频和图片 */
        if (JudgeValue.troubleShootingPhoto != null) {
          picColor.value = {
            changeColorA: true,
            changeColorB: false,
          };
          pointObj.value = JudgeValue;
        } else {
          console.log("暂无问题图片");
          picColor.value = {
            changeColorA: false,
            changeColorB: true,
          };
        }
        if (JudgeValue.troubleShootingVideo != null) {
          reportColor.value = {
            changeColorA: true,
            changeColorB: false,
          };
          pointObj.value = JudgeValue;
        } else {
          console.log("暂无问题视频");
          reportColor.value = {
            changeColorA: false,
            changeColorB: true,
          };
        }
        overlayTPoint.setPosition(selectCo);
        overlayArea.setPosition(undefined);
        overlayWater.setPosition(undefined);
      } else if (Judgelayer == "WaterPointLayer") {
        console.log("WaterPointLayer", JudgeValue);
        Iwater.pointId = JudgeValue.pointId;
        Iwater.roadName = JudgeValue.roadName;
        Iwater.regionId = JudgeValue.regionId;
        Iwater.areaName = JudgeValue.areaName;
        Iwater.checkWellId = JudgeValue.checkWellId;
        Iwater.samplingLocation = JudgeValue.samplingLocation;
        Iwater.cod = JudgeValue.cod;
        Iwater.samplingDate = JudgeValue.samplingDate;
        Iwater.samplingWay = JudgeValue.samplingWay;
        Iwater.remark = JudgeValue.remark;
        overlayWater.setPosition(selectCo);
        overlayTPoint.setPosition(undefined);
        overlayArea.setPosition(undefined);
      }
    }
  });
};
const totalArea = ref();
const troublePoint = ref();
const troubleWaterPoint = ref();
// 排查区域--展示
const showArea = () => {
  // console.log('展示区域', gridData.value)

  const arr = toRaw(gridData.value);
  // 先判断之前有没有要素,如果右的话就先清空
  list.getLayers().array_.map((item) => {
    if (item.className_ == "areaLayer") {
      item.getSource().clear();
    }
  });

  for (let i = 0; i < arr.length; i++) {
    const co = arr[i].coordinates;
    const arrArea = [];
    for (let i = 0; i < co.length; i++) {
      const a = [co[i].x, co[i].y];
      arrArea.push(a);
    }
    // console.log('单个多边形', arrArea)
    areaFeature = new Feature({
      geometry: new Polygon([arrArea]),
      attr: arr[i],
      layerName: "areaLayer",
    });
    areaSource.addFeature(areaFeature);
  }
  classObject.value = {
    spinner2: false,
    spinner2_change: true,
  };
};
// 排查区域--展示开关
const value3 = ref(true);
const showTroubleArea = (val) => {
  // console.log('开关', val)
  if (val == true) {
    showArea();
  } else {
    areaSource.clear();
    areaSourceSearch.clear();
  }
};
// 排查区域--查询
const formInline = reactive({
  search: "", //关键字:片区名称
  status: ["未开始", "已完成", "进行中"], //排查进度
  companyName: ["中建七局", "水务集团"], //排查单位
});
const onSubmit = () => {
  const form = toRaw(formInline);
  console.log("submit!", form);
  // if (form.search != null) {
  //   str1 = form.search.replace(/\s*/g, '') //去掉所有空格
  // } else {
  //   str1 = form.search
  // }
  const str1 = form.search;
  const str2 = form.status.toString();
  const b = str2.split(",");
  const d = "'" + b.join("','") + "'";
  const str3 = form.companyName.toString();
  const e = str3.split(",");
  const f = "'" + e.join("','") + "'";
  console.log(str1, d, f);
  searchTroubleArea(str1, d, f).then((res) => {
    console.log(res);
    gridData.value = res.data;
    totalArea.value = res.data.length;
    areaSource.clear();
    showArea();
  });
};
/* 注册点击 */
const popArea = ref(null); // 弹窗容器(排查区域)
const popPoint = ref(null); // 弹窗容器(问题点)
const popWater = ref(null); // 弹窗容器(水质点)
// 保存点位
const currentCoordinateArea = ref(""); // 弹窗信息(区)
const currentCoordinatePoint = ref(""); // 弹窗信息(问题点)
const currentCoordinateWater = ref(""); // 弹窗信息(水质点)
// 关闭弹窗的方法(排查区域)
const closePopupArea = () => {
  overlayArea.setPosition(undefined);
  currentCoordinateArea.value = "";
  troubleClick.getFeatures().clear();
  // const obj = selectClick.getFeatures().array_[0]
  // console.log('获取交互', obj)
  // selectClick.getFeatures().clear()
};
// 关闭弹窗的方法(问题点)
const closePopupPoint = () => {
  overlayTPoint.setPosition(undefined);
  currentCoordinatePoint.value = "";
  troubleClick.getFeatures().clear();
};
// 关闭弹窗的方法(水质点)
const closePopupWater = () => {
  overlayWater.setPosition(undefined);
  currentCoordinateWater.value = "";
  troubleClick.getFeatures().clear();
};
const Iarea = reactive({
  name: "22222222", //区域名称
  areaName: "", //泵站片区
  regionType: "", //区域类型
  companyName: "", //排查单位
  status: "", //排查进度
  remark: "", //备注
  id: "", //区域编码
  description: "", //排查描述
});
// 排查区域--单击飞行
const rowarea = (row) => {
  console.log(toRaw(row));
  const obj = toRaw(row);
  /* 区域弹窗 */
  Iarea.name = obj.name;
  Iarea.areaName = obj.areaName;
  Iarea.regionType = obj.regionType;
  Iarea.companyName = obj.companyName;
  Iarea.status = obj.status;
  Iarea.remark = obj.remark;
  Iarea.id = obj.id;
  Iarea.description = obj.description;
  Iarea.coordinates = obj.coordinates;
  /* 编辑表单 */
  formInline2.name = obj.name;
  formInline2.areaName = obj.areaName;
  formInline2.regionType = obj.regionType;
  formInline2.companyName = obj.companyName;
  formInline2.status = obj.status;
  formInline2.remark = obj.remark;
  formInline2.id = obj.id;
  formInline2.description = obj.description;
  formInline2.coordinates = obj.coordinates;
  /* 定位与飞行 */
  const arrFly = [obj.coordinates[0].x, obj.coordinates[0].y];
  //console.log('飞行', arrFly, obj)
  currentCoordinateArea.value = arrFly;
  overlayArea.setPosition(arrFly); // 保存坐标点位 // 设置覆盖物出现的位置
  overlayWater.setPosition(undefined);
  overlayTPoint.setPosition(undefined);
};
// 排查区域--弹窗编辑
const onSubmit4 = () => {
  const obj = toRaw(Iarea);
  const params = {
    name: obj.name, //片区名称
    areaName: obj.areaName, //泵站片区
    regionType: obj.regionType, //类型
    companyName: obj.companyName, //单位
    status: obj.status, //排查进度
    remark: obj.remark, //备注
    id: obj.id, //编码
    description: obj.description, //排查描述
    coordinates: obj.coordinates,
  };
  console.log(params);
  editTroubleArea(params).then((res) => {
    console.log(res.data);
  });

  ElMessage({
    message: "成功提交",
    type: "success",
  });
};
// 排查区域--提交
const loginFormRef = ref(null);
const formInline2 = reactive({
  name: "", //片区名称
  areaName: "", //泵站片区
  regionType: "", //区域类型
  companyName: "", //排查单位
  status: "", //排查进度
  remark: "", //备注
  id: "", //区域编码
  description: "", //排查描述
});
// 泵站参数
const optionsPump = ref([]);
//绘制参数
const value = ref("");
const options = [
  {
    value: "Polygon",
    label: "规则多边形",
  },
  {
    value: "handDraw",
    label: "手绘多边形",
  },
  {
    value: "None",
    label: "清空交互",
  },
];
// 绘制选择切换
const choose = ref("");
const drawChange = (val) => {
  choose.value = val;
  console.log(choose.value);
  delSearch(); //先清空再添加新的
  addInteraction();
};
// 空间查询清空交互
const delSearch = () => {
  list.removeInteraction(areaSearch);
  areaSourceSearch.clear();
};
// 空间查询添加画笔交互
const addInteraction = () => {
  if (choose.value !== "None") {
    if (choose.value == "handDraw") {
      delSearch();
      areaSearch = new Draw({
        source: areaSourceSearch,
        type: "Polygon",
        freehand: true,
      });
    } else {
      delSearch();
      areaSearch = new Draw({
        source: areaSourceSearch,
        type: "Polygon",
      });
    }
    list.addInteraction(areaSearch);
    // 监听开始绘制时清空上一次要素
    areaSearch.on("drawstart", (evt) => {
      areaSourceSearch.clear();
    });
  } else {
    // 清空交互
    list.removeInteraction(areaSearch);
    areaSourceSearch.clear();
  }
};
const rulesPC = reactive({
  name: [{ required: true, message: "请输入片区名称", trigger: "blur" }],
  areaName: [{ required: true, message: "请选择泵站片区", trigger: "blur" }],
  regionType: [{ required: true, message: "请选择区域类型", trigger: "blur" }],
  companyName: [{ required: true, message: "请选择排查单位", trigger: "blur" }],
  status: [{ required: true, message: "请选择排查进度", trigger: "blur" }],
  id: [{ required: true, message: "请输入区域编码", trigger: "blur" }],
});
//排查区域新增
const onSubmit2 = () => {
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      // console.log(valid)
      const form = toRaw(formInline2);
      // console.log('submit!', form)
      if (areaLayerSearch.getSource().getFeatures().length >= 1) {
        const featuresSearch = areaLayerSearch.getSource().getFeatures();
        const coordinates = featuresSearch[0].getGeometry().getCoordinates();
        const type = featuresSearch[0].getGeometry().getType();
        const a10 = coordinates[0];
        const a11 = [];
        for (let i = 0; i < a10.length; i++) {
          const obj = { x: a10[i][0], y: a10[i][1] };
          a11.push(obj);
        }
        const newCoordinates = a11;
        console.log("传参", newCoordinates);
        const params = {
          name: form.name, //片区名称
          areaName: form.areaName, //泵站片区
          regionType: form.regionType, //类型
          companyName: form.companyName, //单位
          status: form.status, //排查进度
          remark: form.remark, //备注
          id: form.id, //编码
          description: form.description, //排查描述
          coordinates: newCoordinates,
        };
        submitTroubleArea(params).then((res) => {
          console.log(res.data);
        });

        ElMessage({
          message: "成功提交",
          type: "success",
        });
      } else {
        ElMessage.error("新增请先绘制排查区域");
      }
      totalArea.value = totalArea.value + 1;
      // loginFormRef.value.resetFields()//清除表单
      // 清空交互
      list.removeInteraction(areaSearch);
      areaSourceSearch.clear();
    } else {
      ElMessage.error("请将表单填写完整");
    }
  });
};
//排查区域下方表单编辑
const onSubmit3 = () => {
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log(valid);
      const form = toRaw(formInline2);
      console.log("submit!", form);
      // 判断是否绘制新排查区域
      if (areaLayerSearch.getSource().getFeatures().length >= 1) {
        const featuresSearch = areaLayerSearch.getSource().getFeatures();
        const coordinates = featuresSearch[0].getGeometry().getCoordinates();
        const type = featuresSearch[0].getGeometry().getType();
        // console.log('坐标组查询', type, coordinates[0])
        const a10 = coordinates[0];
        const a11 = [];
        for (let i = 0; i < a10.length; i++) {
          const obj = { x: a10[i][0], y: a10[i][1] };
          a11.push(obj);
        }
        const newCoordinates = a11;
        console.log("传参", newCoordinates);
        const params = {
          name: form.name, //片区名称
          areaName: form.areaName, //泵站片区
          regionType: form.regionType, //类型
          companyName: form.companyName, //单位
          status: form.status, //排查进度
          remark: form.remark, //备注
          id: form.id, //编码
          description: form.description, //排查描述
          coordinates: newCoordinates,
        };
        editTroubleArea(params).then((res) => {
          console.log(res.data);
        });
      } else {
        // 绘制为空则保留坐标数组
        // console.log(areaLayerSearch.getSource().getFeatures())
        editTroubleArea(form).then((res) => {
          console.log(res.data);
        });
      }
      ElMessage({
        message: "成功提交",
        type: "success",
      });
      // loginFormRef.value.resetFields()
      // 清空交互
      list.removeInteraction(areaSearch);
      areaSourceSearch.clear();
    } else {
      ElMessage.error("请将表单填写完整");
    }
  });
};
const gridData = ref([]);
// 排查问题点--展示
let arr;
const showPoint = () => {
  if (toRaw(troublePoint.value) != undefined) {
    arr = toRaw(troublePoint.value);
  } else {
    console.log("暂无问题点");
    arr = [];
  }
  list.getLayers().array_.map((item) => {
    if (item.className_ == "TroublePointLayer") {
      item.getSource().clear();
    }
  });
  for (let i = 0; i < arr.length; i++) {
    TroublePointFeature = new Feature({
      geometry: new Point([arr[i].x, arr[i].y]),
      attr: arr[i],
      layerName: "TroublePointLayer",
    });
    if (arr[i].status == "已修复") {
      TroublePointFeature.setStyle(
        new Style({
          image: new Circle({
            radius: 5,
            fill: new Fill({
              color: "#4c4cfe",
            }),
            stroke: new Stroke({
              color: "#0b0dfc",
              width: 1,
            }),
          }),
        })
      );
    } else {
      TroublePointFeature.setStyle(
        new Style({
          image: new Circle({
            radius: 5,
            fill: new Fill({
              color: "#ef453b",
            }),
            stroke: new Stroke({
              color: "#ff0000",
              width: 1,
            }),
          }),
        })
      );
    }
    TroublePointSource.addFeature(TroublePointFeature);
  }
};
// 排查问题点--开关
const value1 = ref(true);
const showPointSwitch = (val) => {
  // console.log(val)
  if (val == true) {
    showPoint();
  } else {
    TroublePointSource.clear();
  }
};
// 排查问题点--单击
const picColor = ref({
  changeColorA: true,
  changeColorB: false,
});
const reportColor = ref({
  changeColorA: true,
  changeColorB: false,
});
const Ipoint = reactive({
  pointId: "", //点位编码
  roadName: "", //点位名称--道路名称
  regionId: "", //区域编码
  areaName: "", //片区名称
  checkWellId: "", //井室编码
  troubleType: "", //问题类型
  description: "", //问题描述
  troubleShootingDate: "", //排查日期
  remark: "", //点位备注
});
const pointObj = ref();
const rowPoint = (row) => {
  const obj = toRaw(row);
  pointObj.value = obj;
  /* 区域弹窗 */
  Ipoint.pointId = obj.pointId;
  Ipoint.roadName = obj.roadName;
  Ipoint.regionId = obj.regionId;
  Ipoint.areaName = obj.areaName;
  Ipoint.checkWellId = obj.checkWellId;
  Ipoint.troubleType = obj.troubleType;
  Ipoint.description = obj.description;
  Ipoint.troubleShootingDate = obj.troubleShootingDate;
  Ipoint.remark = obj.remark;
  /* 判断是否有视频和图片 */
  if (obj.troubleShootingPhoto != null && obj.troubleShootingUnit != null) {
    picColor.value = {
      changeColorA: true,
      changeColorB: false,
    };
  } else {
    console.log("暂无问题图片");
    picColor.value = {
      changeColorA: false,
      changeColorB: true,
    };
  }
  if (obj.troubleShootingVideo != null && obj.troubleShootingUnit != null) {
    reportColor.value = {
      changeColorA: true,
      changeColorB: false,
    };
  } else {
    console.log("暂无问题视频");
    reportColor.value = {
      changeColorA: false,
      changeColorB: true,
    };
  }
  /* 定位与飞行 */
  currentCoordinatePoint.value = [obj.x, obj.y];
  console.log("飞行", [obj.x, obj.y], obj);
  overlayTPoint.setPosition([obj.x, obj.y]); // 保存坐标点位 // 设置覆盖物出现的位置
  overlayArea.setPosition(undefined);
  overlayWater.setPosition(undefined);
  list.getView().setZoom(9);
  list.getView().setCenter([obj.x, obj.y]);
};
// 问题点--关键字
const pointSearchValue = ref();
const findSearchPoint = () => {
  searchTroublePoint(pointSearchValue.value).then((res) => {
    if (res.data.length >= 1) {
      troublePoint.value = res.data;
      showPoint();
    }
  });
};
// 排查问题点的视频图片弹窗
const demo1 = reactive({
  value6: false, //图片
  value7: false, //报告
  value8: false, //视频
});
//展开图片--判断多张轮播图
const images = ref([]);
const testPhotoUrl = ref();
const single = ref(true);
const poly = ref(false);
const originalUrl = ref("http://58.210.32.10:9020/file/KSPC/");
const openPic = () => {
  demo1.value6 = true;
  const arr = toRaw(pointObj.value);
  console.log("展开问题图片", arr, arr.troubleShootingPhoto);
  if (
    arr.troubleShootingPhoto != null &&
    arr.troubleShootingUnit != null &&
    arr.troubleShootingPhoto != undefined
  ) {
    if (arr.troubleShootingPhoto.includes("/") == false) {
      single.value = true;
      poly.value = false;
      testPhotoUrl.value =
        originalUrl.value +
        arr.troubleShootingUnit +
        "/" +
        arr.troubleShootingPhoto;
      console.log("单张图片", arr.troubleShootingPhoto);
    } else if (arr.troubleShootingPhoto.includes("/") == true) {
      single.value = false;
      poly.value = true;
      const a2 = arr.troubleShootingPhoto.split("/");
      const a22 = [];
      for (let i = 0; i < a2.length; i++) {
        const obj = {
          id: i,
          pic: a2[i],
          originalUrl: originalUrl.value + arr.troubleShootingUnit + "/",
        };
        a22.push(obj);
      }
      images.value = a22;
      console.log("多张图片", arr.troubleShootingPhoto);
    } else {
      console.log("错误", arr.troubleShootingPhoto);
    }
  } else {
    // 否则显示404
    testPhotoUrl.value = "https://temp.im/200x200";
  }
};
// 展开视频
const movieValue = ref("");
const movieOptions = ref([]);
const testVideoUrl = ref();
const openVideo = () => {
  demo1.value8 = true;
  const arr = toRaw(pointObj.value);
  console.log("展开问题视频", arr, arr.troubleShootingVideo);
  if (
    arr.troubleShootingVideo != null &&
    arr.troubleShootingUnit != null &&
    arr.troubleShootingVideo != undefined
  ) {
    if (arr.troubleShootingVideo.includes("/") == false) {
      testVideoUrl.value =
        originalUrl.value +
        arr.troubleShootingUnit +
        "/" +
        arr.troubleShootingVideo;
      console.log("单个视频", arr.troubleShootingVideo);
    } else if (arr.troubleShootingVideo.includes("/") == true) {
      const a2 = arr.troubleShootingVideo.split("/");
      const a22 = [];
      for (let i = 0; i < a2.length; i++) {
        const obj = { value: a2[i], label: a2[i] };
        a22.push(obj);
      }
      movieOptions.value = a22;
      // 默认加载第一个视频
      testVideoUrl.value =
        originalUrl.value + arr.troubleShootingUnit + "/" + a2[0];
      console.log("多个视频", arr.troubleShootingVideo);
    } else {
      console.log("错误", arr.troubleShootingVideo);
    }
  } else {
    console.log("无视频");
    testVideoUrl.value = "https://temp.im/200x200";
  }
};
// 关闭视频
const handleVideoX = () => {
  var myVideo = document.getElementById("video1");
  if (myVideo.paused) {
    myVideo.play();
  } else {
    myVideo.pause();
  }
};
// 切换视频列表
const movieChange = (val) => {
  console.log(val);
  testVideoUrl.value = originalUrl.value + val;
};
// 水质点--展示
let arrWater;
const showWaterPoint = () => {
  // console.log('水质点', troubleWaterPoint.value)
  if (toRaw(troubleWaterPoint.value) != undefined) {
    arrWater = toRaw(troubleWaterPoint.value);
  } else {
    console.log("暂无水质点");
    arrWater = [];
  }
  list.getLayers().array_.map((item) => {
    if (item.className_ == "WaterPointLayer") {
      item.getSource().clear();
    }
  });
  for (let i = 0; i < arrWater.length; i++) {
    WaterPointFeature = new Feature({
      geometry: new Point([arrWater[i].x, arrWater[i].y]),
      cod: arrWater[i].cod,
      attr: arrWater[i],
      layerName: "WaterPointLayer",
    });
    if (arrWater[i].cod <= 180) {
      WaterPointFeature.setStyle(
        new Style({
          image: new RegularShape({
            points: 4, // 顶点数
            radius: 5, // 图形大小，单位为像素
            angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
            stroke: new Stroke({
              color: "#ff0000",
              width: 1,
            }),
            fill: new Fill({
              color: "#ef453bB3",
            }),
          }),
        })
      );
    } else if (arrWater[i].cod > 180 && arrWater[i].cod <= 260) {
      WaterPointFeature.setStyle(
        new Style({
          image: new RegularShape({
            points: 4, // 顶点数
            radius: 5, // 图形大小，单位为像素
            angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
            stroke: new Stroke({
              color: "#fdfe06",
              width: 1,
            }),
            fill: new Fill({
              color: "#fdfe09B3",
            }),
          }),
        })
      );
    } else if (arrWater[i].cod > 260) {
      WaterPointFeature.setStyle(
        new Style({
          image: new RegularShape({
            points: 4, // 顶点数
            radius: 5, // 图形大小，单位为像素
            angle: 0.785398185, //旋转角
            stroke: new Stroke({
              color: "#0d0efb",
              width: 1,
            }),
            fill: new Fill({
              color: "#1215faB3",
            }),
          }),
        })
      );
    } else {
      console.log("不在区间内", arrWater[i].cod);
    }
    WaterPointSource.addFeature(WaterPointFeature);
  }
};
// 水质点--关键字
const waterSearchValue = ref();
const findSearchWater = () => {
  searchCOD(waterSearchValue.value).then((res) => {
    if (res.data.length >= 1) {
      troubleWaterPoint.value = res.data;
      showWaterPoint();
    }
  });
};
// 水质点--多选框
const checked1 = ref(true);
const checked2 = ref(true);
const checked3 = ref(true);
const handle180 = (val) => {
  // console.log('180', val)
  if (val == false) {
    WaterPointSource.forEachFeature((feature) => {
      if (feature.values_.cod <= 180) {
        WaterPointSource.removeFeature(feature);
      }
    });
  } else {
    const arr = toRaw(troubleWaterPoint.value);
    for (let i = 0; i < arr.length; i++) {
      WaterPointFeature = new Feature({
        geometry: new Point([arr[i].x, arr[i].y]),
        cod: arr[i].cod,
      });
      if (arr[i].cod <= 180) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
              stroke: new Stroke({
                color: "#ff0000",
                width: 1,
              }),
              fill: new Fill({
                color: "#ef453bB3",
              }),
            }),
          })
        );
      } else if (arr[i].cod > 180 && arr[i].cod <= 260) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
              stroke: new Stroke({
                color: "#fdfe06",
                width: 1,
              }),
              fill: new Fill({
                color: "#fdfe09B3",
              }),
            }),
          })
        );
      } else if (arr[i].cod > 260) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角
              stroke: new Stroke({
                color: "#0d0efb",
                width: 1,
              }),
              fill: new Fill({
                color: "#1215faB3",
              }),
            }),
          })
        );
      } else {
        console.log("不在区间内", arr[i].cod);
      }
      WaterPointSource.addFeature(WaterPointFeature);
    }
  }
};
const handle260 = (val) => {
  // console.log('180', val)
  if (val == false) {
    WaterPointSource.forEachFeature((feature) => {
      if (feature.values_.cod > 180 && feature.values_.cod <= 260) {
        WaterPointSource.removeFeature(feature);
      }
    });
  } else {
    const arr = toRaw(troubleWaterPoint.value);
    for (let i = 0; i < arr.length; i++) {
      WaterPointFeature = new Feature({
        geometry: new Point([arr[i].x, arr[i].y]),
        cod: arr[i].cod,
      });
      if (arr[i].cod <= 180) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
              stroke: new Stroke({
                color: "#ff0000",
                width: 1,
              }),
              fill: new Fill({
                color: "#ef453bB3",
              }),
            }),
          })
        );
      } else if (arr[i].cod > 180 && arr[i].cod <= 260) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
              stroke: new Stroke({
                color: "#fdfe06",
                width: 1,
              }),
              fill: new Fill({
                color: "#fdfe09B3",
              }),
            }),
          })
        );
      } else if (arr[i].cod > 260) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角
              stroke: new Stroke({
                color: "#0d0efb",
                width: 1,
              }),
              fill: new Fill({
                color: "#1215faB3",
              }),
            }),
          })
        );
      } else {
        console.log("不在区间内", arr[i].cod);
      }
      WaterPointSource.addFeature(WaterPointFeature);
    }
  }
};
const handle260Plus = (val) => {
  // console.log('180', val)
  if (val == false) {
    WaterPointSource.forEachFeature((feature) => {
      if (feature.values_.cod > 260) {
        WaterPointSource.removeFeature(feature);
      }
    });
  } else {
    const arr = toRaw(troubleWaterPoint.value);
    for (let i = 0; i < arr.length; i++) {
      WaterPointFeature = new Feature({
        geometry: new Point([arr[i].x, arr[i].y]),
        cod: arr[i].cod,
      });
      if (arr[i].cod <= 180) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
              stroke: new Stroke({
                color: "#ff0000",
                width: 1,
              }),
              fill: new Fill({
                color: "#ef453bB3",
              }),
            }),
          })
        );
      } else if (arr[i].cod > 180 && arr[i].cod <= 260) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角--单位是弧度--此时相当于旋转45度
              stroke: new Stroke({
                color: "#fdfe06",
                width: 1,
              }),
              fill: new Fill({
                color: "#fdfe09B3",
              }),
            }),
          })
        );
      } else if (arr[i].cod > 260) {
        WaterPointFeature.setStyle(
          new Style({
            image: new RegularShape({
              points: 4, // 顶点数
              radius: 5, // 图形大小，单位为像素
              angle: 0.785398185, //旋转角
              stroke: new Stroke({
                color: "#0d0efb",
                width: 1,
              }),
              fill: new Fill({
                color: "#1215faB3",
              }),
            }),
          })
        );
      } else {
        console.log("不在区间内", arr[i].cod);
      }
      WaterPointSource.addFeature(WaterPointFeature);
    }
  }
};
// 水质点--开关
const value2 = ref(true);
const showWaterPointSwitch = (val) => {
  // console.log(val)
  if (val == true) {
    showWaterPoint();
  } else {
    WaterPointSource.clear();
  }
};
// 水质点--单击
const Iwater = reactive({
  pointId: "", //点位编码
  roadName: "", //点位名称--道路名称
  regionId: "", //区域编码
  areaName: "", //片区名称
  checkWellId: "", //井室编码
  samplingLocation: "", //采样位置
  cod: "", //COD数
  samplingDate: "", //采样日期
  samplingWay: "", //采样方式
  remark: "", //点位备注
});

const rowWater = (row) => {
  console.log(toRaw(row));
  const obj = toRaw(row);
  /* 区域弹窗 */
  Iwater.pointId = obj.pointId;
  Iwater.roadName = obj.roadName;
  Iwater.regionId = obj.regionId;
  Iwater.areaName = obj.areaName;
  Iwater.checkWellId = obj.checkWellId;
  Iwater.samplingLocation = obj.samplingLocation;
  Iwater.cod = obj.cod;
  Iwater.samplingDate = obj.samplingDate;
  Iwater.samplingWay = obj.samplingWay;
  Iwater.remark = obj.remark;
  /* 定位与飞行 */
  currentCoordinateWater.value = [obj.x, obj.y];
  console.log("飞行", [obj.x, obj.y], obj);
  overlayWater.setPosition([obj.x, obj.y]); // 保存坐标点位 // 设置覆盖物出现的位置
  overlayTPoint.setPosition(undefined);
  overlayArea.setPosition(undefined);
  list.getView().setZoom(9);
  list.getView().setCenter([obj.x, obj.y]);
};
/* 改变模板宽度*/
const changeWidth = ref("373");
const switchWidthX = ref({
  switchWidth_before: true,
  switchWidth_after: false,
});
const switchWidth = () => {
  toRaw(changeWidth.value) == "373"
    ? (changeWidth.value = "770")
    : (changeWidth.value = "373");
  if (toRaw(changeWidth.value) == "373") {
    switchWidthX.value = {
      switchWidth_before: true,
      switchWidth_after: false,
    };
  } else {
    switchWidthX.value = {
      switchWidth_before: false,
      switchWidth_after: true,
    };
  }
};
</script>

<style lang="less" scoped>
/* 手写进度条 */
.spinner2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner2_change {
  display: none;
}
.spinner2 > div {
  background-color: #072588c9;
  height: 100%;
  width: 6px;
  display: inline-block;
  margin-left: 2px;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner2 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner2 .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.spinner2 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner2 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.spinner2 .rect6 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.spinner2 .rect7 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.spinner2 .rect8 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.spinner2 .rect9 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.spinner2 .rect10 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }

  20% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
// 样式穿透
.waterSearch {
  :deep(.vxe-input--inner) {
    padding: 0 36px 0 5px;
  }
}
.troubleBox {
  :deep(.el-dialog) {
    margin: 60px 10px;
  }
  :deep(.el-dialog__header) {
    padding: 16px;
  }
  :deep(.el-dialog__body) {
    padding: 0px 16px 16px;
  }
  :deep(.el-tabs) {
    --el-tabs-header-height: 30px;
  }
  :deep(.el-input) {
    width: 150px;
  }
  :deep(.el-select) {
    width: 150px;
  }
  :deep(.el-tabs--border-card > .el-tabs__content) {
    padding: 0px;
  }
  :deep(.el-form-item__label) {
    width: 69px;

    justify-content: space-around;
    font-size: 13px;
    padding: 0px;
  }
  :deep(.el-form--inline .el-form-item) {
    margin: 0px;
  }
  :deep(.el-checkbox) {
    margin-right: 10px;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: url(../.././assets/images/k_db.png) 0px 0px / 100% 100%
      no-repeat !important;
    // background: #2171ea;
    // border-bottom: 3px solid #32c5ff;
    height: 36px;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--header-title) {
    font-size: 15px;
    font-weight: 400;
    padding: 0 0 0.6em 1em;
    height: 35px;
    line-height: 36px;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--close-btn) {
    color: #fff;

    text-shadow: 0px 2px 2px #00000071; //给文字加阴影
  }
  :deep(.vxe-modal--content) {
    overflow: hidden;
    overflow-y: hidden;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--content) {
    padding: 0;
    overflow-y: hidden;
  }
  :deep(.el-switch) {
    padding-bottom: 3px;
  }
  :deep(.el-table) {
    width: 767px;
    max-width: none;
  }
  :deep(.el-table th) {
    padding: 0;
  }
  :deep(.el-table td) {
    padding: 0;
  }
  // 修改表头颜色
  :deep(.el-table__header-wrapper thead th div) {
    font-size: 13px;
    color: #7c7a83;
    height: 30px;
    line-height: 30px;
  }
  :deep(.vxe-input) {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    position: relative;
    width: 138px;
  }
  :deep(.vxe-input .vxe-input--search-icon) {
    color: #1c9cfe;
  }
  :deep(.el-tabs--border-card > .el-tabs__content) {
    overflow-x: auto;
  }
  :deep(.el-tabs--border-card > .el-tabs__content::-webkit-scrollbar) {
    width: 3px;
    height: 3px; // 纵向滚动条 必写
  }
  :deep(.el-tabs--border-card > .el-tabs__content::-webkit-scrollbar-corner) {
    background: #fff;
  }
  :deep(.el-tabs--border-card > .el-tabs__content::-webkit-scrollbar-thumb) {
    background-color: #99999967;
    // border: 1px dashed #888888;
    width: 2px;
    height: 50px;
  }
  :deep(.el-form) {
    width: 760px;
    position: relative;

    .editBtn {
      // background: #000;
      width: 109px;
      height: 32px;
      position: absolute;
      bottom: -4px;
      right: 5px;
    }
  }
  :deep(.vxe-modal--wrapper .vxe-modal--header-right) {
    padding: 6px;
  }
}
/**伸缩栏 */
.switchWidth_before {
  cursor: pointer;
  position: absolute;
  right: 32px;
  top: 11.5px;
  width: 14px;
  transform: rotate(-90deg);
  z-index: 10;
}
.switchWidth_after {
  cursor: pointer;
  position: absolute;
  right: 32px;
  top: 11.5px;
  width: 14px;
  transform: rotate(90deg);
  z-index: 10;
}
/* 排查区域搜索样式 */
.area_inline {
  :deep(.el-form) {
    width: 760px;
  }
}
.el-button--text {
  margin-right: 15px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

// 编辑表单
.editForm {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #cccccc;
  padding: 0 10px;
}
.editTitle {
  color: #4c4c4c;
  font-weight: 600;
}
.totalArea {
  color: #4b4bff;
  font-size: 13px;
  width: 126px;
  height: 29px;
}
// 编辑按钮

.submitEdit {
  :deep(.el-form) {
    height: 150px;
  }
  :deep(.el-form--inline .el-form-item) {
    margin: 0 5px 12px 10px;
  }
}
// 排查区域弹窗
.PCarea {
  position: absolute;
  top: 30%;
  max-height: 270px;
  min-height: 271px;
  width: 230px;
  font-size: 11px;
  background-color: #0a163cc9;
  border-radius: 5px;
  .td {
    width: 40px;
    text-align: center;
    font-size: 12px;
  }
}
.PCpoint {
  position: absolute;
  font-size: 11px;
  top: 30%;
  max-height: 258px;
  min-height: 258px;
  width: 230px;
  background-color: #0a163cc9;
  border-radius: 5px;
  .td {
    width: 60px;
    text-align: center;
    font-size: 12px;
  }
}
/* 
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
  :deep(.el-carousel__container) {
    height: 400px;
  }
}
.PCwater {
  position: absolute;
  font-size: 11px;
  top: 30%;
  max-height: 258px;
  min-height: 258px;
  width: 230px;
  background-color: #0a163cc9;
  border-radius: 5px;
  .td {
    width: 60px;
    text-align: center;
    font-size: 12px;
  }
}
.waterSearch {
  display: flex;
  margin: 10px;
  height: 20px;
  width: 767px;
}

.bufferPoint {
  :deep(.contentPanePoint) {
    scrollbar-color: #5385b1 #0a163cc9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.contentPanePoint::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
  }
  :deep(.contentPanePoint::-webkit-scrollbar-corner) {
    background: rgba(0, 0, 0, 0);
  }
  :deep(.contentPanePoint::-webkit-scrollbar-thumb) {
    background-color: #5385b1;
    border-radius: 5px;
  }
}
.contentPanePoint {
  padding: 4px;
  color: #80eeff;
  overflow: scroll;
}
.first_line {
  padding: 0 5px;
  height: 20px;
  width: 220px;
  line-height: 15px;
  font-size: 13px;
  border-bottom: 2px solid #80eeff;
}
.close {
  // margin-top: 5px;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  font-size: 20px;
  background: #ea4f70;
  border: 1px solid #fffbdf;
  line-height: 9px;
  color: white;
  border-radius: 2px;
}
.titleButton {
  position: absolute;
  top: 4px;
  cursor: pointer;
  right: 3px;
}
.dotted_line {
  padding-bottom: 1px;
  border-bottom: 1.5px dotted #80eeff;
}
.second_line {
  margin-top: 4px;
  margin-bottom: 3px;
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  padding: 0;
  justify-content: start;
  display: flex;
}
.second_line > div {
  // cursor: pointer;
  // border-bottom: 1px solid #80eeff;
  margin-right: 20px;
  width: 50px;
}
.changeColorA {
  cursor: pointer;
  border-bottom: 1px solid #80eeff;
}
.changeColorB {
  cursor: auto;
  border-bottom: 1px solid #999;
  color: #999;
  pointer-events: none;
}
.text_input {
  width: 150px;
  height: 20px;
  margin: 5px 0;
  color: #4c4c5e;
}
.input_btn {
  width: 35px;
  height: 15px;
  line-height: 5px;
  border-radius: 4px;
  position: absolute;
  bottom: 5px;
  right: 0;
  margin-top: 5px;
  margin-right: 10px;
  color: #4c4c5e;
  text-align: center;
}
/* 线弹窗的图片视频报告弹窗头 */
.picPop {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }
}
/* 关键字栏目间距 */
.keyword_firstline {
  margin-right: 10px;
}
.keyword_firstline_b {
  margin: 0 10px;
}
/* COD间隔 */
.COD_box {
  display: flex;
  margin-left: 10px;
  :deep(.el-checkbox.el-checkbox--small) {
    padding-bottom: 2px;
  }
}
.COD_box_title {
  margin-right: 10px;
}
</style>
